<template>
    <div>
        <mj-title type="h2" title="Avatar 头像"></mj-title>
        <div class="page-desc">用来代表用户或事物，支持图片、图标或字符展示。</div>

        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="demo-avatar">
                    <mj-avatar icon="user" size="60" />
                    <mj-avatar icon="user" size="large" />
                    <mj-avatar icon="user" />
                    <mj-avatar icon="user" size="small" />
                </div>
                <div class="demo-avatar">
                    <mj-avatar shape="square" icon="user" size="60" />
                    <mj-avatar shape="square" icon="user" size="large" />
                    <mj-avatar shape="square" icon="user" />
                    <mj-avatar shape="square" icon="user" size="small" />
                </div>
                <mj-divider>如何使用</mj-divider>
                <div class="page-desc">
                    <p>头像有三种尺寸，两种形状可选。</p>
                    <p>size可以设置为数值。</p>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;div class="demo-avatar">
        &lt;mj-avatar icon="user" size="60" />
        &lt;mj-avatar icon="user" size="large" />
        &lt;mj-avatar icon="user" />
        &lt;mj-avatar icon="user" size="small" />
    &lt;/div>
    &lt;div class="demo-avatar">
        &lt;mj-avatar shape="square" icon="user" size="60" />
        &lt;mj-avatar shape="square" icon="user" size="large" />
        &lt;mj-avatar shape="square" icon="user" />
        &lt;mj-avatar shape="square" icon="user" size="small" />
    &lt;/div>
&lt;/template>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="类型"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="demo-avatar">
                    <mj-avatar icon="user" />
                    <mj-avatar>U</mj-avatar>
                    <mj-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
                    <mj-avatar style="background-color: #87d068">U</mj-avatar>
                </div>
                <mj-divider>类型</mj-divider>
                <div class="page-desc">
                    <p>支持三种类型：图片、Icon 以及字符，可以自定义style</p>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-avatar icon="user" />
    &lt;mj-avatar>U&lt;/mj-avatar>
    &lt;mj-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
    &lt;mj-avatar style="background-color: #87d068">U</mj-avatar>
&lt;/template>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Avatar 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>shape</td>
                    <td>指定头像的形状，可选值为 circle、square</td>
                    <td>String</td>
                    <td>circle</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>设置头像的大小，可选值为 <code>large</code>、<code>small</code>，支持设置具体数值</td>
                    <td>String | Number</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>src</td>
                    <td>图片类头像的资源地址</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>icon</td>
                    <td>设置头像的图标类型，参考 <code>Icon</code> 组件</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<style scoped>
.demo-avatar span {margin-right: 20px;}
.demo-avatar {margin-bottom: 20px;}
</style>